<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<div style="width: 100%;"><p style="text-align: center;">类型管理（二级路由）</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		
		<el-card>
		<div style="width: 100%;">
			
			<el-table :data="data.breed" border style="width: 100%">
				<el-table-column label="品种管理(一级路由)" align="center" >
					<el-table-column prop="breedid" label="编号" width="180" />
					<el-table-column prop="breedname" label="名称" width="180" />
					<el-table-column prop="order" label="顺序" width="180" />
					<el-table-column prop="num" label="类型数量" width="180" />
				</el-table-column>
			 
					
			  <el-table-column  label="类型管理信息(二级路由)" align="center">
								<template #default="car">
									<el-table :data="car.row.types" border style="width: 100%">
										<el-table-column prop="typeid" label="编号"></el-table-column>
										<el-table-column label="图片">
											<template #default="car">
												<el-image style="height:3rem;" :src="$ip+`/public/shows/`+car.row.pic" />
											</template>
											
										</el-table-column>
										
										<el-table-column prop="typename" label="名称"></el-table-column>
										<el-table-column prop="typesn" label="类型编号"></el-table-column>
										<el-table-column  label="操作">
											<template #default="car">
												<el-button style="background-color:#E1337F;" size="default" type="danger" @click.prevent="update(car.row.typeid)">
													<el-icon><EditPen /></el-icon>更改
												</el-button>
											</template>
										</el-table-column>
										<el-table-column  label="操作">
											<template #default="car">
												<el-button v-if="car.row.tnum!=0" style="background-color:#E1337F;" size="default" type="danger"  disabled="">
													<el-icon><EditPen /></el-icon>删除
												</el-button>
												<el-button v-if="car.row.tnum==0" style="background-color:#E1337F;" size="default" type="danger" @click.prevent="del(car.row.typeid)">
													<el-icon><EditPen /></el-icon>删除
												</el-button>
											</template>
										</el-table-column>
									
									</el-table>
								</template>
							</el-table-column>
							
				<el-table-column label="添加类型" width="180">
					<template #default="car">
						<el-button size="default" type="danger" style="background-color: #E1337F;" @click="add(car.row.breedid)">
							<el-icon><Plus /></el-icon>添加</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			
			
		</div>
		</el-card>
		
		
		</div>
		
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../../router/index.js"
		import store from "../../../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen} from '@element-plus/icons-vue'
		import bottom from "../../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../../store/alert.js'
		
		const data=reactive({
			breed:[{breedname:"a",types:[]}]
		})
		
		function add(breedid){
			router.push({
				path: '/mer/meraddtype',
				query: {
					breedid:breedid
				}
			})
		}
		function update(typeid){
			router.push({
				path:"/mer/meraddtype",
				query:{
					typeid:typeid
				}
			})
		}
		
		function del(typeid){
			$get("/mer/type/del/"+typeid).then((read)=>{
				data.breed=read.data.data
				success(read.data.msg)
				
			})
			
		}
		onMounted(()=>{
			
			$get("/mer/breed/findAll").then((read)=>{
				
				data.breed=read.data.data.breed
			})
			
		})
		
		
		
</script>

<style>
</style>
